<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button type="button" onclick="get01()">btn-get-keyValue</button>

    <a href="javascript:get02()">a-get-jsonObj</a>

    <input type="button" value="btn-post-jsonStr" onclick="post01()">

    <button type="button" onclick="post02()">btn-post-keyValue</button>

    <button type="button" onclick="post03()">btn-post-jsonObj</button>

    <script src="/plugins/jquery/jquery.min.js"></script>

    <script>
        //jquery的get方法
        //发送参数url?key=value&key=value2
        //第一个参数是后台地址
        //第二个参数是一个函数 - 回调函数 - res就是后台返回给前端的json对象
        function get01() {
            $.get('/paramTrans/test01?id=111&username=wc', function (res) {
                //浏览器控制台输出这个json对象
                console.log(res);
                //通过json对象的key来获取json对象的value
                console.log(res.data);
            })
        }

        //②get请求发送一个json对象
        //参数json对象的key需要和后端方法的参数名保持一致 - 摆地摊
        //参数json对象的key需要和后端方法中对象的属性保持一致 - 对象
        function get02() {
            $.get('/paramTrans/test02', {id:111, username:"wcnm", power:0}, function (res) {
                console.log(res)
            })
        }

        //post请求发送json字符串
        //必须要写jquery的原生的ajax方法
        function post01(){
            //json字符串
            let datas = '{"id":100,"username":"tom"}'
            $.ajax({
                type:'post',
                url:'/paramTrans/test03',
                dataType: 'json',
                contentType:'application/json;charset=utf-8',
                data: datas,
                success:function(res){
                    console.log(res);
                }
            })
        }

        function post02(){
            $.post('/paramTrans/test04?id=100&username=admin',function(res){
                //浏览器控制台输出这个json对象
                console.log(res);
                //通过json对象的key来获取json对象的value
                console.log(res.data);
            })
        }

        /*
        415，Unsupported Media Type，默认application/x-www-form-urlencode
        但是你/paramTrans/test05方法中却加了@RequestBody，
        那么响应标头的Content-Type就会改成application/json，导致传递数据编码类型不一致
        */
        function post03(){
            $.post('/paramTrans/test05',{id:100,username:"tom"},function(res){
                console.log(res);
            });
        }

        /*
        补充：$.get和$.post方法都是封装的$.ajax方法。
        默认的content-Type都是application/x-www-form-urlencode
        而不是application/json，也就是你传入的其实不是json对象而是javaScript对象，
        $.get方法会将其转化成keyValue的形式放到url上，
        $.post方法则会将其转化成json字符串
         */

    </script>

</body>
</html>